<template>
	<el-container>
		<el-header>
			<p>一 | 站 | 式 | 金 | 融 | 服 | 务 | 平 | 台</p>
		</el-header>
      	<el-main>
			<div class="login">
				<h1>钱叔叔</h1>
				<el-input v-model="name" placeholder="请输入您的用户名" prefix-icon="login_tel"></el-input>
				<el-input type="password" v-model="pwd" placeholder="请输入您的密码"></el-input>
				<el-checkbox v-model="memory">记住密码</el-checkbox>
				<p @click="register">还没有账号? 去注册</p>
				<div class="btn">
					<el-button type="primary" @click="login">登录</el-button>
				</div>
			</div>
      	</el-main>
    </el-container> 
</template>

<script>
import {login} from '@/api/login'
import {msgMixin} from '@/common/mixin'
export default {
	mixins:[msgMixin],
	data() {
		return {
			name: '',
			pwd: '',
			memory: true
		}
	},
	created() {
	},
    methods: {
		login() {
			login(this.name,this.pwd).then((res) => {
				console.log(res)
				if(res.code !== 1) {
					this.openMsg('error',res.msg)
				}else {
					// 0 资料未填写 1 审核中 2 审核失败 3 审核成功
					if(res.data.status == 0 || res.data.status == 2) {
						this.$router.push('/baseInfo')
					}else if(res.data.status == 1) {
						this.openMsg('warning','资料审核中')
					}else if(res.data.status == 3) {
						this.$router.push('/home')
					}
				}
			})
		},
        register() {
            this.$router.push('/register')
        }
    }
}
</script>

<style lang="scss" scoped>
.el-container {
    height: 100%;
	background: url(../../assets/img/bgc.png) no-repeat center center;
	.el-header {
		height: 170px !important;
		position: relative;
		p{
			position: absolute;
			bottom: 10px;
			left: 10%;
			color: white;
			font-size: 16px;
			letter-spacing: 4px;
		}
	}
	.el-main {
		.login {
			width: 420px;
			margin: 100px auto 0;
			h1 {
				font-size: 50px;
				color: white;
				text-align: center;
				margin-bottom: 50px;
			}
			>p {
				color: white;
				text-align: right;
				margin-top: 60px;
				margin-bottom: 5px;
				cursor: pointer;
			}
			.el-input {				
				margin-bottom: 10px;
			}
			
			.el-checkbox {
				float: left;
			}
			.btn {
				display: flex;
				.el-button {
                    width: 100%;
				}
			}
		}
	}
}

</style>

